<template>
  <van-tabbar v-model="active">
    <van-tabbar-item to="/message" icon="chat-o">消息</van-tabbar-item>
    <van-tabbar-item to="/contact" icon="friends-o">联系人</van-tabbar-item>
    <van-tabbar-item to="/my" icon="manager-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();
let active = ref(0);
let routerPath = ["/message", "/contact", "/my"];

watch(
  router,
  (newValue, oldValue) => {
    active.value = routerPath.findIndex(
      (item) => item.indexOf(newValue.path) !== -1
    );
  },
  { immediate: true }
);
</script>

<style scoped>
</style>